<template>
  <div v-if="props.readonly==1">{{format}}</div>
  <el-select v-model="name" placeholder="请选择" filterable clearable v-else>
    <el-option v-for="item in options" :key="item.id" :label="item.storeName" :value="item.id" />
  </el-select>
</template>

<script setup lang="ts">
import { onMounted } from "vue";
const { proxy } = getCurrentInstance();
let props = defineProps(["modelValue", "readonly", "factoryId"]);
const emit = defineEmits(["update:modelValue"]);

//data
let options = ref([]);

//生命周期
const name = computed({
  get() {
    return props.modelValue;
  },
  set(value: Number) {
    emit("update:modelValue", value);
  },
});
let format = computed(() => {
  let index = proxy.$utils.findIndexByField(
    options.value,
    "id",
    props.modelValue
  );
  if (index != -1) return options.value[index].storeName;
});

onMounted(() => {
  getInfo();
});

//methods
let getInfo = async () => {
  let obj = {};
  if (props.factoryId) obj["factoryId"] = props.factoryId;
  let { data } = await proxy.$apis.storeAllList(obj);
  options.value = data;
};

watch(
  () => props.factoryId,
  (newValue, oldValue) => {
    if (newValue) getInfo();
  },
  { deep: true, immediate: true }
);
</script>

<style lang="scss" scoped>
</style>
